<template>
    <div>
        {{ content }}
        <p class="content">xxxxxxx全局控制</p>
        <div ref="inslide" class="inslide" v-show="bol">我在里面</div>
    </div>
</template>

<script lang="ts" setup>
// import { onClickOutside } from '@vueuse/core';
import { ref } from 'vue';
const bol = ref(true);
const inslide = ref(null);
// 点击外部关闭对应元素
onClickOutside(inslide, () => (bol.value = !bol.value));
const content = '我是头部一号的左侧二号的三级菜单01';
</script>

<style lang="scss" scoped>
.content {
    color: var(--active-color);
}
.inslide {
    width: 200px;
    height: 200px;
    background-color: var(--bg-color);
    border: 1px solid var(--active-color);
    color: var(--active-color);
}
</style>
